<template>

  <div id="fileInfo">
    <div id="rootList" class="file">
      <el-button type="text" @click="addtxt">新增列表</el-button>
      <el-table :data="listDict"  style="width: 100%">
        <el-table-column prop="filename" label="文件名" width="180" sort-by="index"></el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button @click="check(scope.row)" type="text" size="small">查看</el-button>
            <el-button @click="del(scope.$index, listDict)" type="text" size="small">删除</el-button>
            <el-button @click="moveUp(scope.$index,scope.row)" type="text" size="small">↑</el-button>
            <el-button @click="moveDown(scope.$index,scope.row)" type="text" size="small">↓</el-button>
          </template>
        </el-table-column>
      </el-table>


    </div>

    <!--<el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>-->


    <!--<el-radio-group v-model="direction">-->
    <!--<el-radio label="ltr">从左往右开</el-radio>-->
    <!--</el-radio-group>-->

    <div id="chileList" class="file">
      <el-button @click="add()" type="primary" style="margin-left: 16px;">
        添加选中文件
      </el-button>
      <el-table :data="cListDict" style="width: 100%">
        <el-table-column prop="filename" label="文件名" width="180" sort-by="index"></el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <!--<el-button @click="check(scope.row)" type="text" size="small">查看</el-button>-->
            <!--<el-button @click="del(scope.$index, listDict)" type="text" size="small">删除</el-button>-->
            <el-button @click="cmoveUp(scope.$index,scope.row)" type="text" size="small">↑</el-button>
            <el-button @click="cmoveDown(scope.$index,scope.row)" type="text" size="small">↓</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="file">
      <el-table :data="fileDict" style="width: 100%" @selection-change="changeFun">
        <el-table-column type="selection"></el-table-column>
        <el-table-column prop="filename" label="文件名" width="180" sort-by="index"></el-table-column>
        <!--<el-table-column label="操作" width="180">-->
        <!--<template slot-scope="scope">-->
        <!--<el-button @click="check(scope.row)" type="text" size="small">查看</el-button>-->
        <!--<el-button @click="del(scope.$index, listDict)" type="text" size="small">删除</el-button>-->
        <!--<el-button @click="moveUp(scope.$index,scope.row)" type="text" size="small">↑</el-button>-->
        <!--<el-button @click="moveDown(scope.$index,scope.row)" type="text" size="small">↓</el-button>-->
        <!--</template>-->
        <!--</el-table-column>-->
      </el-table>
      <!--<el-button @click="upload()" type="primary" style="margin-left: 16px;">-->
      <!--上传文件-->
      <!--</el-button>-->
      <form method="post" action="http://127.0.0.1:8886/test/upload" enctype="multipart/form-data">
        <input type="file" name="file"><br>
        <input type="submit" value="提交">
      </form>

    </div>



    <!--<el-dialog :title="this.title2" :visible.sync="dialogTableVisible">-->


    <!--</el-dialog>-->



    <!--</table>-->
    <!--<el-transfer-->
    <!--filterable-->
    <!--v-model="value"-->
    <!--:titles="['全部文件',this.title2]"-->
    <!--@change="handleChange"-->
    <!--:data="data">-->
    <!--<el-button class="transfer-footer" slot="left-footer" size="small" @click="upload">上传</el-button>-->
    <!--<el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button>-->
    <!--</el-transfer>-->
  </div>
</template>


<script>
  import axios from 'axios'
  export default {
    data() {
      return {
        data: this.GetFileInfo(),
        value: [],
        checkBoxData: [],
        listDict: [],
        fileDict: [],
        title2: "无",
        cListDict: [],
      };
    },
    created : function(){
      this.GetListDict();
    },
    methods: {
      //第一级子目录刷新
      crefresh(){
        var cListDict = this.cListDict
        var files = [];
        for (var i = 0; i < cListDict.length; i++){
          files.push(cListDict[i].filename)
        }
        const constinfo = this.$http
          // .post('test/crefresh?json=',JSON.stringify(this.cListDict)+","+this.title2,{
          //   headers: {
          //     'Content-Type': 'application/json;charset=utf-8'
          //   }
          // })
          .post('test/add?rightData='+files+"&fileName="+this.title2)
          .then(tm => {

          })
          .catch(error => {
            console.log(error)
          })
      },
      // 主目录刷新
      refresh(){
        var listDict = this.listDict
        var files = [];
        for (var i = 0; i < listDict.length; i++){
          files.push(listDict[i].filename)
        }
        const constinfo = this.$http
          // .post('test/refresh?json=',JSON.stringify(this.listDict),{
          //   headers: {
          //     'Content-Type': 'application/json;charset=utf-8'
          //   }
          // })
          .post('test/refresh?rightData='+files)
          .then(tm => {

          })
          .catch(error => {
            console.log(error)
          })
      },
      changeFun(val) {
        this.checkBoxData = val;
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },

      // 上移
      cmoveUp(index, row) {
        var that = this
        // console.log('上移', index, row)
        if (index > 0) {
          const upDate = that.cListDict[index - 1]
          that.cListDict.splice(index - 1, 1)
          that.cListDict.splice(index, 0, upDate)
        } else {
          alert('已经是第一条，不可上移')
        }
        this.crefresh();
      },
      // 下移
      cmoveDown(index, row) {
        var that = this
        // console.log('下移', index, row)
        if ((index + 1) === that.cListDict.length) {
          alert('已经是最后一条，不可下移')
        } else {
          const downDate = that.cListDict[index + 1]
          that.cListDict.splice(index + 1, 1)
          that.cListDict.splice(index, 0, downDate)
        }
        this.crefresh();
      },
      // 上移
      moveUp(index, row) {
        var that = this
        // console.log('上移', index, row)
        if (index > 0) {
          const upDate = that.listDict[index - 1]
          that.listDict.splice(index - 1, 1)
          that.listDict.splice(index, 0, upDate)
        } else {
          alert('已经是第一条，不可上移')
        }
        this.refresh();
      },
      // 下移
      moveDown(index, row) {
        var that = this
        // console.log('下移', index, row)
        if ((index + 1) === that.listDict.length) {
          alert('已经是最后一条，不可下移')
        } else {
          const downDate = that.listDict[index + 1]
          that.listDict.splice(index + 1, 1)
          that.listDict.splice(index, 0, downDate)
        }
        this.refresh();
      },
      //向txt子目录中添加
      upload(){

        const constinfo = this.$http
          .post('test/upload?fileName='+ fileName)
          .then(tm => {

          })
          .catch(error => {
            console.log(error)
          })
      },
      // 删除
      del(index, rows){
        var fileName = (rows.splice(index, 1))[0].filename;
        const constinfo = this.$http
          .post('test/delTxt?fileName='+ fileName)
          .then(tm => {

          })
          .catch(error => {
            console.log(error)
          })

        this.listDictAdd()
      },
      // 查看
      check(row){
        this.dialogTableVisible = true
        // this.title2 = row.filename;
        this.title2 = row.filename;
        const constinfo = this.$http
          .post('test/fileDictByName?fileName='+row.filename)
          .then(tm => {
            // this.value = tm.data
            console.log(tm)
            this.cListDict = tm.data
          })
          .catch(error => {
            console.log(error)
          })
        console.log(this.rightData)
      },

      addtxt(){
        this.$prompt('列表名称', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
          // inputErrorMessage: '列表格式不正确'
        }).then(({ value }) => {
          this.$message({
            type: 'success',
            message: '你的列表是: ' + value
          });
          this.createTxt(value)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
      },
      // 加入listDict.txt 列表
      listDictAdd(){
        const constinfo = this.$http
          .post('test/listDictAdd?json=',JSON.stringify(this.listDict),{
            headers:{
              'Content-Type':'application/json;charset=utf-8'
            }
          })
          .then(tm => {

          })
          .catch(error => {
            console.log(error)
          })
      },

      createTxt(res){
        const constinfo = this.$http
          .get('test/creatTxt?fileName='+ res)
          .then(tm => {
            console.log(tm.data)
            if (tm.data){
              this.listDict.push({filename:res})
              // 加入listDict.txt 列表
              this.listDictAdd()
            }
          })
          .catch(error => {
            console.log(error)
          })
      },

      GetListDict(){
        const constinfo = this.$http
          .get('test/listDict')
          .then(tm => {
            this.listDict = tm.data

          })
          .catch(error => {
            console.log(error)
          })
        console.log()
      },

      GetFileInfo() {
        const data = [];
        const constinfo = this.$http
          .get('test/allFileDict')
          .then(tm => {
            // const files = tm.data
            // files.forEach((file, index) => {
            //   data.push({
            //     label: file.filename,
            //     key: file.filename,
            //   });
            // });
            this.fileDict = tm.data
          })
          .catch(error => {
            console.log(error)
          })
        console.log()


        return data;
      },

      handleChange(value, direction, movedKeys) {
        console.log(value);
        this.add(value)
      },

      add(){
        console.log("add++++++++++++++++++++++++++++satrt")
        var checkBoxData = this.checkBoxData
        var files = [];
        for (var i = 0; i < checkBoxData.length; i++){
          files.push(checkBoxData[i].filename)
        }
        console.log(this.title2)
        this.rightData = this.value
        const constinfo = this.$http
          .post('test/add?rightData='+files+"&fileName="+this.title2)
          .then(tm => {
          })
          .catch(error => {
            console.log(error)
          })
        console.log("add++++++++++++++++++++++++++++end")
      }
    }
  };
</script>

<style>
  div .file{
    display: inline-block;
  }
</style>



